<template>
  <div class="monitor">
    <div class="row1">
      <Card v-for="(item, index) in videList" :key="index" class="video-card">
        <Wvideo
          :src="item.url"
          :channel="item.channel"
          :port="item.port"
          :title="item.name"
          :video_back="item.video_back"
        />
      </Card>
    </div>
    <div class="row2">
      <div class="map-parent">
        <Card class="map-card">
          <!-- <div class="map-mark"></div> -->
          <MapBox :markList="farmLandInfoVoList" @markerClick="markerClick" />
        </Card>
      </div>
      <!-- <Card class="video-card-2">
        <Wmodule title="摄像头名称" class="video-module">
          <Wvideo :src="'24'" :channel="0" :port="80" :title="nowDay" />
        </Wmodule>
      </Card> -->
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue'
import Card from '@/components/wcard/index.vue'

import Wmodule from '@/components/wmodule/index.vue'
import MapBox from '../home/chartmodule/mapbox.vue'
import Wvideo from '@/components/wvideo/index.vue'

import { getProjectStatics, getHouseDeviceList } from '@/api'
import dayjs from 'dayjs'
import imgUrl32 from '@/assets/img/32.png'
import video_1 from '@/assets/img/video_1.png'
import video_2 from '@/assets/img/video_2.png'
import video_3 from '@/assets/img/video_3.png'
import video_4 from '@/assets/img/video_4.png'
const farmLandInfoVoList = ref([]) // 地图上相关地块信息
const now = dayjs()
const nowDay = ref(now.format('YYYY-MM-DD'))
const videList = reactive([
  {
    name: nowDay,
    url: '4',
    channel: 1,
    port: 8000,
    video_back: video_4
  },
  {
    name: nowDay,
    url: '3',
    channel: 1,
    port: 8000,
    video_back: video_3
  },
  {
    name: nowDay,
    url: '2',
    channel: 1,
    port: 8000,
    video_back: video_2
  },
  {
    name: nowDay,
    url: '24',
    channel: 1,
    port: 8000,
    video_back: video_1
  }
])

onMounted(() => {
  getProjectStatics({
    id: 1
  }).then((res) => {
    if (res.code === 200) {
      const { data = {} } = res
      console.log('===', data)
      const _farmLandInfoVoList = data.farmLandInfoVoList || []
      farmLandInfoVoList.value = _farmLandInfoVoList
    }
  })
})

const markerClick = (item) => {
  console.log('item', item)
}
</script>
<style lang="scss" scoped>
.monitor {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  .row1 {
    width: 100%;
    height: 305px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    overflow-x: auto;
    gap: 14px;
    &::-webkit-scrollbar {
      width: 0;
    }
    .video-card {
      width: calc(25% - 11px);
      flex-shrink: 0;
      padding: 18px 22px;
      box-sizing: border-box;
    }
  }
  .row2 {
    flex: 1;
    width: 100%;
    // display: grid;
    // grid-template-columns: repeat(2, 1fr);
    // gap: 20px;
    .video-card-2 {
      width: 100%;
      padding: 18px 22px;
      box-sizing: border-box;
    }
  }
  .map-card {
    height: 100%;
    width: 100%;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .map-parent {
    width: 100%;
    height: 100%;
    position: relative;
    .map-mark {
      position: absolute;
      left: 4px;
      right: 4px;
      top: 4px;
      bottom: 4px;
      z-index: 4;
      pointer-events: none;
      background: radial-gradient(
        circle at center,
        transparent 10%,
        #1c6f98 80%,
        #1c6f98
      );
    }
  }
  .video-module {
    height: 100%;
  }
  .video5 {
    height: 100%;
    width: 100%;
  }
  .card-video {
    padding: 18px 23px;
    box-sizing: border-box;
  }
  .w-select {
    :deep(.el-select__wrapper) {
      background-color: transparent;
      box-shadow: 0 0 0 1px rgba(4, 182, 139, 1) inset;
      .el-select__placeholder {
        color: #fff;
      }
    }
    .icon {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
